<script setup lang="ts">
definePage({
  name: 'demo-string',
  style: {
    navigationBarTitleText: '字符串路径跳转',
  },
})

const router = useRouter()
const route = useRoute()

function goBack() {
  router.back()
}

function pushToObject() {
  router.push({ path: '/pages/router/demo-object' })
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部 -->
    <view class="header-container">
      <view class="header-content">
        <view class="header-icon">
          📝
        </view>
        <view class="header-title">
          字符串路径跳转演示
        </view>
        <view class="header-subtitle">
          使用 router.push('/path') 进行跳转
        </view>
      </view>
    </view>

    <!-- 跳转信息 -->
    <demo-block title="跳转信息" transparent>
      <view class="info-card">
        <view class="info-title">
          当前页面信息
        </view>
        <view class="info-items">
          <view class="info-item">
            <text class="info-label">
              路径:
            </text>
            <text class="info-value">
              {{ route.path }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">
              跳转方式:
            </text>
            <text class="info-value-alt">
              字符串路径
            </text>
          </view>
          <view class="info-item no-border">
            <text class="info-label">
              代码:
            </text>
            <text class="info-value">
              router.push('/pages/router/demo-string')
            </text>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 操作按钮 -->
    <demo-block title="继续演示" transparent>
      <view class="button-group">
        <wd-button type="primary" block @click="pushToObject">
          跳转到对象路径演示
        </wd-button>
        <wd-button type="warning" block @click="goBack">
          返回上一页
        </wd-button>
      </view>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  padding: 24rpx 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-container {
  margin: 0 24rpx 24rpx;
}

.header-content {
  padding: 48rpx 40rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 24rpx;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 24rpx;
  font-size: 64rpx;
}

.header-title {
  margin-bottom: 16rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  font-size: 28rpx;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.info-card {
  padding: 32rpx;
  background-color: #fff;
  border-radius: 24rpx;
}

.dark .info-card {
  background-color: var(--wot-dark-background2);
}

.info-title {
  margin-bottom: 24rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.dark .info-title {
  color: var(--wot-dark-color);
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 2rpx solid #f0f0f0;

  &.no-border {
    border-bottom: none;
  }
}

.dark .info-item {
  border-bottom-color: var(--wot-dark-border);
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.dark .info-label {
  color: var(--wot-dark-color2);
}

.info-value {
  font-family: monospace;
  font-size: 28rpx;
  color: #333;
}

.dark .info-value {
  color: var(--wot-dark-color);
}

.info-value-alt {
  font-size: 28rpx;
  color: #333;
}

.dark .info-value-alt {
  color: var(--wot-dark-color);
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
</style>
